<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>采购单</title>
</head>

<style>
    body .demo-class .layui-layer-title {
        background: #cc0000;
        color: #fff;
        border: none;
    }

    body .demo-class .layui-layer-btn {
        border-top: 1px solid #E9E7E7
    }

    body .demo-class .layui-layer-btn a {
        background: #af3451;
    }

    body .demo-class .layui-layer-btn .layui-layer-btn1 {
        background: #999;
    }
</style>
<script src="../../static/global.js"></script>
<body>

<!-- 查询采购单-->
<div style="margin-top: 20px">
    <form class="layui-form layui-form-pane"  action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select id="status" lay-filter="aihao">
                        <option value="">请选择</option>
                        <option value="0">新建</option>
                        <option value="1">已分配</option>
                        <option value="2">已领取</option>
                        <option value="3">已完成</option>
                        <option value="4">有异常</option>

                    </select>
                </div>
                <label class="layui-form-label">仓库</label>
                <div class="layui-input-inline">
                    <select id="ware_id" class="ware_id_add" lay-verify="required" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                    </select>
                </div>
            <div class="layui-inline">
                <button type="submit" class="layui-btn" id="purchase_souso" lay-submit="" lay-filter="demo1">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>


<!--新增采购单页面-->
<div id="purchase_add_div" style="margin-left: 90px;margin-top: 30px;display: none">
    <form class="layui-form layui-form-pane" id="purchase_add_form" lay-filter="purchase_add_form">
        <div class="layui-form-item">
            <label class="layui-form-label">采购单名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="请输入采购单名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">优先级</label>
            <div class="layui-input-inline">
                <input type="text" name="priority" lay-verify="required" placeholder="请输入优先级" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 60px">
            <button type="submit" class="layui-btn" lay-submit="" id="purchase_add" lay-filter="purchase_add">添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>

<!--  商品库存信息修改页面-->
<div id="purchase_up_div" style="margin-left: 90px;margin-top: 30px;display: none">
    <form class="layui-form layui-form-pane" id="purchase_up_form" lay-filter="purchase_up_form">
        <div class="layui-form-item">
            <label class="layui-form-label">采购单名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="o" lay-verify="required" placeholder="请输入采购单名称" class="layui-input">
                <input type="text" name="id"  class="layui-input layui-hide">

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">优先级</label>
            <div class="layui-input-inline">
                <input type="text" name="priority" lay-verify="required" placeholder="请输入采购商品ID" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 60px">
            <button type="button" class="layui-btn" lay-submit="" id="purchase_up" lay-filter="purchase_up">修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>

<!-- 头部工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">批量删除</button>
    </div>
</script>
<!--表格渲染-->
<table class="layui-hide" id="demo" lay-filter="test"></table>
<!--侧边栏操作-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="fenpei">分配</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--分配页面-->
<div id="purchase_fenpei_up_div" style="margin-left: 90px;margin-top: 30px;display: none">
    <form class="layui-form layui-form-pane" id="purchase_fenpei_up_form" lay-filter="purchase_fenpei_up_form">
        <div class="layui-form-item">
            <label class="layui-form-label">采购人</label>
            <div class="layui-input-inline">
                <div class="layui-input-inline">
                    <select name="assignee_id" lay-filter="aihao">
                        <option value="">请选择</option>
                        <option value="0">zhangsan</option>
                        <option value="1">lisi</option>
                        <option value="2">wangwu</option>
                        <option value="3">zhaoliu</option>
                    </select>
            </div>
        </div>
            <input type="text" name="id"  class="layui-input layui-hide">
        </div>
        <div class="layui-form-item" style="margin-left: 60px">
            <button type="button" class="layui-btn" lay-submit="" id="purchase_fenpei_up" lay-filter="purchase_fenpei_up">修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>


<script>
    layui.use(['form','table','layer'],function (){
       let form = layui.form;
       let table = layui.table;
       let layer = layui.layer;
       let $ = layui.$;

        //渲染仓储的下拉单
        $.ajax({
            url: glodate.serverZuul + 'ware_sku/find_admin_ware_info_All',   //后台数据地址
            success: function (data) {
                console.log(data)
                $.each(data, function (index, item) {   //循环后台返回的json数据
                    //new Option方法是新建一个option，第一个参数是需要显示的值，第二个参数是option的value值,然后append到下拉框中。
                    $('.ware_id_add').append(new Option(item.name, item.id));
                })
                layui.form.render("select");
            }
        })


       table.render({
           elem:'#demo',
           url:glodate.serverZuul + 'purchase/find_All_Purchase', //数据接口
           toolbar:'#toolbarDemo', //开启头部工具栏
           page:true,//开启分页
           cols:[[
               {type:'checkbox',fixed:'left'},
               {type: 'numbers', title: '序号'},
               {field: 'name', title: '采购名称'},
               {field: 'assignee_id', title: '采购人ID'},
               {field: 'assignee_name', title: '采购人姓名'},
               {field: 'phone', title: '采购人联系方式'},
               {field: 'priority', title: '优先级'},
               {field: 'status', title: '状态',templet:
                       function (d) {
                           if (d.status == 0) {
                               return '<span class="layui-badge-rim">新建</span>'
                           } else if (d.status == 1) {
                               return '<span class="layui-badge layui-bg-orange">已分配</span>'
                           } else if (d.status == 2) {
                               return '<span class="layui-badge layui-bg-gray">正在采购</span>'
                           } else if (d.status == 3) {
                               return '<span class="layui-badge layui-bg-blue">已完成</span>'
                           }else if (d.status == 4) {
                               return '<span class="layui-badge layui-bg-badge">采购失败</span>'
                           }
                       }},
               {field: 'ware_id', title: '仓库ID'},
               {field: 'amount', title: '总金额'},
               {field: 'create_time', title: '创建日期'},
               {field: 'update_time', title: '更新日期'},
               {fixed: 'right',width:250, align: 'center', toolbar: '#barDemo'}
           ]],id:'tableID'
       })

        //模糊查询
        $("#purchase_souso").on('click', function () {
            active.reload();
            return false;
        });

        active = {
            reload: function () {
                table.reload('tableID', {
                    where: {
                        'status': $("#status").val(),
                        'ware_id': $("#ware_id").val()
                    }, page: {
                        curr: 1
                    }
                })
            }
        }


        //删除采购单
        table.on('toolbar(test)', function (obj) {
            let checkStatus = table.checkStatus("tableID");  //获取复选框的信息
            let data = checkStatus.data; //获取选中的数据

            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 1,
                        skin: 'demo-class',
                        area: ['500px', '500px'],
                        anim: 5,
                        content: $('#purchase_add_div'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        btn: ['关闭'],
                        yes: function (index, layero) {
                            layer.close(index);
                        }
                    });
                    return false;
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        let purchase_ids = [];
                        for (let i = 0; i < data.length; i++) {
                            purchase_ids.push(data[i].id);
                        }
                        let ids = purchase_ids.join(",");
                        console.log(ids);
                        layer.confirm("真的要删除这【" + data.length + "】个吗？", function () {
                            $.ajax({
                                url: glodate.serverZuul + "purchase/delete_Purchase",
                                method: "delete",
                                data: {"id": ids},
                                success: function (res) {
                                    console.log(res);
                                    if (res.code == 200) {
                                        layer.msg("删除成功！");
                                    } else {
                                        layer.alert(res.msg)
                                    }
                                    active.reload();
                                }
                            })
                        });
                    }
                    break;
            };
        });



        //添加采购单
        form.on('submit(purchase_add)', function (data) {
            let url = glodate.serverZuul + "purchase/insert_Purchase";
            let purchaseadd =form.val('purchase_add_form');  //获取表单内的所有的值

            console.log(purchaseadd);
            $.ajax({
                url:url,
                method:"post",
                dataType:"json",
                data: JSON.stringify(purchaseadd),
                contentType:"application/json",
                success:function (res) {
                    if (res.code == 200) {
                        layer.msg("添加成功！", {icon: 6});//2秒关闭（如果不配置，默认是3秒）
                        formIdreset('#purchase_add_form');
                    } else {
                        layer.msg(res.msg, {icon: 5});//2秒关闭（如果不配置，默认是3秒）
                    }
                    active.reload();
                }
            })
            return false;  //防止表单重复提交
            layer.closeAll();

        });

        //修改采购单
        form.on('submit(purchase_up)', function () {
            let datas = form.val('purchase_up_form');
            console.log(datas)
            $.ajax({
                url: glodate.serverZuul + "purchase/update_Purchase",
                method: "put",
                data: JSON.stringify(datas),
                dataType: "json",
                contentType:"application/json",
                success: function (res) {
                    console.log(res);
                    if (res.code == 200) {
                        layer.msg("修改成功", {
                            icon: 6
                        });
                    } else {
                        layer.msg(res.msg, {
                            icon: 6
                        });
                    }
                    active.reload();  //重载页面表格
                }

            })
            return false;  //防止表单重复提交
            layer.closeAll();
        })

        //监听侧边栏工具条进行修改删除操作
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'del') { //删除
                layer.confirm('真的删除这【' + data.id + '】吗?', function (index) {
                    $.ajax({
                        url: glodate.serverZuul + "purchase/delete_Purchase",
                        method: "delete",
                        data: {"id": data.id},
                        success: function (res) {
                            console.log(res);
                            if (res.code == 200) {
                                layer.msg("删除成功！", {
                                    icon: 6
                                });
                            } else {
                                layer.alert(res.msg, {
                                    icon: 5
                                });
                            }
                            active.reload();
                        }
                    })
                });
            } else if (layEvent === 'edit') { //编辑
                form.val('purchase_up_form', data);
                layer.open({
                    type: 1,
                    skin: 'demo-class',
                    title: '修改',
                    area: ['500px', '500px'],
                    anim: 5,
                    content: $('#purchase_up_div') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
                return false;
            }else if (layEvent === 'fenpei') { //编辑
                form.val('purchase_fenpei_up_form', data);
                layer.open({
                    type: 1,
                    skin: 'demo-class',
                    title: '修改',
                    area: ['500px', '500px'],
                    anim: 5,
                    content: $('#purchase_fenpei_up_div') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
                return false;
            }

        });

        //修改分配采购人员
        form.on('submit(purchase_fenpei_up)', function () {
            let datas = form.val('purchase_fenpei_up_form');
            console.log(datas)
            $.ajax({
                url: glodate.serverZuul + "purchase/update_Purchase",
                method: "put",
                data: JSON.stringify(datas),
                dataType: "json",
                contentType:"application/json",
                success: function (res) {
                    console.log(res);
                    if (res.code == 200) {
                        layer.msg("修改成功", {
                            icon: 6
                        });
                    } else {
                        layer.msg(res.msg, {
                            icon: 6
                        });
                    }
                    active.reload();  //重载页面表格
                }

            })
            return false;  //防止表单重复提交
            layer.closeAll();
        })







        //提取的清楚表單的方法  formId form表头的id值
        function formIdreset(formId) {
            // 重置清空
            $(formId)[0].reset();
            form.render();//必须写
        }

    });


</script>

</body>
</html>